<template>
  <div id="app" >
    <mt-header class="header" fixed :title="subTitle"  v-show="subPage">
          <span @click="goBack" slot="left">
            <mt-button icon="back" ></mt-button>
          </span>
    </mt-header>
    <div style="height: 40px" v-if="subPage"></div>
    <div id="mainBody">
      <transition :name="transitionName">
        <router-view class="Router"/>
      </transition>
    </div>
    <tabbar class="tabbar" :selected="selected" :tabs='tabs'></tabbar>
  </div>
</template>

<script>
  import tabbar from './components/templates/tabbar'

export default {
  name: 'App',
  components:{tabbar},
  data(){
    return{
      transitionName:'slide-right',
      subPage:false,
      subTitle:"",
      selected:"MainPage",
      tabs:[{id:"MainPage",name:"学崖",icon:require("./assets/icons/学崖.png")}
        ,{id:"student/overview",name:"智能志愿",icon:require("./assets/icons/智能志愿.png")}
        ,{id:"collections",name:"我的志愿",icon:require("./assets/icons/我的志愿.png")}
        ,{id:"UserCenter",name:"我的",icon:require("./assets/icons/我的.png")}]
    }
  },
  methods:{
    goBack(){
      window.isBack = true;
      if(history.length>2){
        window.history.go(-1);
      }else{
        this.$router.push("/MainPage");
      }
    },
    isSubPage(route){
      if(route.fullPath && /.+\/.+/.test(route.fullPath)){
        this.subTitle = route.meta.title;
        this.subPage = true;
      }else{
        this.subPage = false;
      }
    }
  },
  watch:{
    '$route' (to,from){
       let isBack = window.isBack;
       this.transitionName = isBack?'slide-right':'slide-left';
       window.isBack = false;
       document.title = to.meta.title;
      this.isSubPage(to);
      if(to.fullPath == '/student/overview'){
        this.selected = 'student/overview'
      }else if(to.fullPath == '/collections'){
        this.selected = 'collections'
      }
    }
  },created: function () {
    console.log(this.$route);
    this.isSubPage(this.$route);

    this.$router.beforeEach((to, from, next) => {
      next();
      // 重定向功能，为解决ios微信上复制链接功能不能复制到动态路由问题
      // 获取地址前段部分，不算参数
      var replaceUrl = window.location.href.split('#')[0] + '#' + to.path;
      var index = 0; // 索引初始化
      // 给replaceUrl拼接参数
      for (var i in to.query) {
        // 判断是否等于第一个参数
        if (index == 0) {
          // 拼接地址第一个参数，添加“?”号
          replaceUrl += '?' + i + '=' + to.query[i]
        } else {
          // 拼接地址非第一个参数，添加“&”号
          replaceUrl += '&' + i + '=' + to.query[i]
        }
        index++; // 索引++
      }
      // console.log('test20190117：' + to.meta.title, replaceUrl);
      window.location.replace(replaceUrl); // 重定向跳转
      // 重定向功能------end
    })

  }

/*
  pc 与 mobile两套不同的css
  ,created: function () {
    if (document.documentElement.clientWidth > 640) {
      require('./style/index.scss');
      this.plaform = 'pc';
    } else {
      require('./style/mobile.scss');
      this.plaform = 'mobile';
    }
  }*/
}
</script>

<style>
  html,body{
    margin: 0 auto;
    overflow-x: hidden;
    height: 100%;
    background-color: #fff;
  }
  a{
    text-decoration: none;
  }
  strong {
    font-weight: normal;
    font-style: normal;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.mint-cell-wrapper{
  background-image: none!important;
}
.mint-cell:last-child{
  background-image: none!important;
}
  .mint-tab-item-label{
    white-space: nowrap;
  }
  .mint-header-title{
   font-size: 16px;
  }
  .mint-cell-value{
    color:#BCBCBC;
  }
  .right{
    float: right;
  }
  .left{
    float: left;
  }
  .alignCenter{
    text-align: center;
  }

  .clear:after{
    display: table;
    clear: both;
    content: "";
  }
  .mt5{
    margin-top: 5px;
  }
  .pad5{
    padding: 5px;
  }
  .padt40{
    padding-top: 40px;
  }
  .padlr10{
    padding:10px;
  }
  .mgtop10{
     margin-top: 10px;
   }
   .mr10{
     margin-right: 10px;
   }
   .ml10{
     margin-left: 10px;
   }
.bggray{
  background: #f8f8f8;
}
  .box-shadow {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
  }
  .phead{
    text-indent: 2em
  }
  #mainBody{
    position: absolute;
    width: 100%;
    height:calc(100% - 95px);
  }
  .Router {
    overflow-y: auto;
    min-height: 100%;
    transition: all .8s ease;
    padding-bottom: 55px;
  }
  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
  }
  .mainDiv{
    display: flex;
    flex-direction: column;
  }
  .content {
    flex:1;
  }
  .myRadio .mint-cell{
    float: left;
  }
  /*  */
  .myRadio .mint-cell .mint-cell-wrapper{
    padding: 0;
  }
  .line{
    width: 100%;
    height: 10px;
    background: #f7f7f7;
  }
  .border-bot .mint-cell-wrapper{
    width: auto;
    padding: 0;
    margin: 0 10px;
    border-bottom: 1px solid #EEEEEE;
  }
   .h60 .mint-cell-wrapper{
     height: 60px;
   }
   .bg-white{
     background: #fff;
   }
   .h60 .col-12{
    width: 49%;
    display: inline-block;
  }
  .h60 .col-8{
    width: 80%;
    display: inline-block;
  }
  .h60 .col-2{
    width: 20%;
    display: inline-block;
  }
 .h60 .col-tit{
   height:14px;
   font-size:14px;
   font-family:SourceHanSansCN-Medium,SourceHanSansCN;
   font-weight:500;
   color:rgba(51,51,51,1);
   line-height:21px;
    margin-bottom: 10px;
  }

  .h60 .col-txt {
    color: rgba(160, 160, 160, 1);
    font-size: 14px;
  }
  .h60 .col-date {
    float: right;
    color: rgba(160, 160, 160, 1);
    font-size: 12px;
  }

 .h60 .col-num{
font-size:20px;
font-family:SourceHanSansCN-Normal;
font-weight:400;
color:#00AF8F;
line-height:27px;
text-align: right;
  }
  .headTit  .mint-cell-wrapper{
    line-height: 24px;
  }
  .tabbar , .header{
    max-width: 620px;
    margin: 0 auto;
  }
  .mint-tab-item-label{
    color: #00A179!important;
  }
  a{
    color: #00AF8F!important;
  }
 .mint-header,.mint-button--primary{
    background-color: #00AF8F!important;
  }
  .mint-switch-input:checked+.mint-switch-core {
    border-color: #00AF8F!important;
    background-color: #00AF8F!important;
  }

</style>
